<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="./js/vue.global.js"></script>
    <link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.min.css" type="text/css"
        rel="stylesheet" />
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.full.min.js"
        type="application/javascript"></script>
    <script src="/socket.io/socket.io.js"></script>
    <link rel="stylesheet" href="./index.css">
    <title>计算节点</title>
</head>

<body>
    <div id="app">
        <!-- 连接状态 -->
        <div class="conn-status">
            <span class="local-server">
                本地服务器：
                <el-tag :key="localService.label" :type="localService.type" class="mx-1" effect="dark">
                    {{ localService.label }}</el-tag>
            </span>
            <span class="center-server">
                协调服务器：
                <el-tag :key="centerService.label" :type="centerService.type" class="mx-1" effect="dark">
                    {{ centerService.label }}</el-tag>
            </span>
            <span class="center-server">
                节点编号：
                <el-tag :key="NODE_ID" :type="localService.type" class="mx-1" effect="dark">
                    {{ NODE_ID }}</el-tag>
            </span>
        </div>

        <el-button @click="start()" type="primary" size="large" circle>开始</el-button>

        <div>
            <el-scrollbar ref="scrollbarRef" height="400px">
                <p ref="innerRef" v-for="item in messages" :key="item" class="scrollbar-demo-item">{{ item }}</p>
            </el-scrollbar>
        </div>
    </div>
    <script>
        const { createApp, ref } = Vue

        const app = createApp({
            data() {
                return {
                    // 节点编号
                    NODE_ID: 'cb288d29-d275-4bde-828a-f9e76e9f3114',
                    // 本地服务器连接
                    localService: {
                        type: 'warning' /* warning success */, label: '异常' // 正常
                    },
                    // 本地服务器与中央服务器的连接
                    centerService: {
                        type: 'warning', label: '异常'
                    },
                    socket: {},// socket 对象
                    // 消息队列
                    messages: [],
                    a: 0,
                    scrollbarRef: ref(null)
                }
            },

            computed: {
                messagesLength() {
                    return this.messages.length
                }
            },

            mounted() {
                // 尝试连通性
                let socket = io();
                this.socket = socket
                const that = this

                // 尝试连通性
                socket.on('conn', ({ centerService, localService }) => {
                    // 本地服务
                    that.localService.type = localService ? 'success' : 'warning'
                    that.localService.label = localService ? '正常' : '异常'
                    that.centerService.type = centerService ? 'success' : 'warning'
                    that.centerService.label = centerService ? '正常' : '异常'
                })

                // 本地服务器，推送的 计算消息
                socket.on('s-v-push-message', (data) => {
                    this.messages.unshift(data)
                })
            },

            methods: {
                // 开始计算
                start() {
                    this.socket.emit('v-s-start')
                },
            }

        })

        app.use(ElementPlus)
        app.mount('#app')
    </script>
</body>

</html>